<template>
    <div class="add">
        <TitleView :title="title">
            <span class="spanright" @click="addMylist">保存</span>
        </TitleView>
        <div class="con">
            <p>抬头类型</p>
            <p><span v-for="item, index in spans" :key="index" :class="active == index ? 'active' : ''"
                    @click="onclick(index)">{{ item }}</span></p>
        </div>
        <van-cell-group inset style="margin: 0;">
            <van-field v-model="addList.name" label="抬头名称" :placeholder="active != 2 ? '请输入公司名' : '请输入个人姓名'" />
            <van-field v-if="active != 2" v-model="addList.duty" label="税号" placeholder="请输入税号" />
            <van-field v-model="addList.mail" label="邮箱" placeholder="请输入邮箱" />
        </van-cell-group>
        <van-cell v-if="active != 2" center title="需要增值税专用发票">
            <template #right-icon>
                <van-switch v-model="checked" />
            </template>
        </van-cell>
        <van-cell center title="设为默认发票">
            <template #right-icon>
                <van-switch v-model="checked1" />
            </template>
        </van-cell>
    </div>
</template>

<script lang="ts" setup>
import TitleView from "@/components/TitleView.vue";
import { addMyList, setMyList } from '../apis/index';
import { ref, onMounted } from 'vue';
import router from '../router/index';
import { useRoute } from "vue-router";
let spans = ref(['企业', '非企业性单位', '个人'])
let title = ref('新增发票抬头')
let checked = ref(false)
let checked1 = ref(true)
let active = ref(0)
const addList = ref({
    unit: 0,
    name: '',
    duty: '',
    mail: '',
    defaults: ''
});
let route: any = useRoute()
let onclick = (index: any) => {
    active.value = index;
    addList.value.unit = index
}
onMounted(() => {
    if (route.query.paste == 1) {
        let { unit, name, duty, mail, defaults } = JSON.parse(route.query.add)
        // console.log(id);
        addList.value = { unit, name, duty, mail, defaults }
    }
})
let addMylist = async () => {
    addList.value.defaults = checked1.value == true ? '1' : '0';
    addList.value.unit = active.value;
    // console.log(checked1.value);
    let { name, duty, mail } = addList.value
    if (name != '' && mail != '') {
        if (route.query.paste == 0) {
            await addMyList(addList.value).then((res: any) => {
                // console.log(res);
                if (res.code == 200) {
                    router.push('/')
                }
            })
        } else {
            // console.log('编辑');
            let { id } = JSON.parse(route.query.add)
            let res: any = await setMyList({ addList: addList.value, id })
            // console.log(res);
            if (res.code == 200) {
                router.push('/')
            }
        }
    } else {
        alert('不能为空')
    }
}


</script>

<style lang="scss" scoped>
.add {
    width: 100%;
    height: 100%;

    .con {
        height: 50px;
        width: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        margin: 10px 0;

        p {
            margin-left: 15px;

            span {
                display: inline;
                padding: 2px 5px;
                margin-right: 15px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }

            .active {
                color: aqua;
                border: 1px solid aqua;
            }
        }
    }

    .btn {
        height: 50px;
        width: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;

        p {
            margin-left: 15px;
        }
    }
}
</style>